import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import './index.css';
import {Image} from "antd";



function Woolly(props) {

	const state = useSelector((state) => state);

	console.log('state: ', state);
	// const domain = state.domain;
	const domain = 'example.domain.com';

	return (
		<div id='woolly' className='section'>
			<p className='mark'>假设您购买的域名是: <b>{domain}</b>, 下文将默认使用该域名</p>
			<div id='woolly-login' className='operate-section'>
				<h3>【登录后台】 在浏览器中访问管理后台登录地址 https://{domain}/#/login</h3>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-login_1.png' /></div>
			</div>
			<div id='woolly-password' className='operate-section'>
				<h3>【修改密码】 修改管理员登录密码、店铺基本信息</h3>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-password_1.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-password_2.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-password_3.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-password_4.png' /></div>
			</div>
			<div id='woolly-setting' className='operate-section'>
				<h3>【系统设置】</h3>
				<h3> 系统设置主要包括 小程序、商户号、短信服务、CDN等参数的配置,请参考左侧菜单各项参数的配置图解 </h3>
				<p>例: 如果需要配置验证码短信相关参数,请点击左侧"短信服务参数"菜单进行操作</p>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-setting_1.png' /></div>
			</div>
			<div id='woolly-picture' className='operate-section'>
				<h3>【图床功能】</h3>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-picture_1.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-picture_2.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-picture_3.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-picture_4.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-picture_5.png' /></div>
			</div>
			<div id='woolly-category' className='operate-section'>
				<h3>【栏目编辑】</h3>
				<p className='mark'>创建栏目前,需要先上传栏目图片,尺寸是 520*200 像素</p>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-category_1.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-category_2.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-category_3.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-category_4.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-category_5.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-category_6.png' /></div>
			</div>
			<div id='woolly-theme' className='operate-section'>
				<h3>【专题编辑】</h3>
				<p className='mark'>创建专题前,需要先上传首页专题展示图和专题头部图(上传步骤同栏目图)。首页专题展示图尺寸, 前2张是 375*375 像素, 第 3 张是 750*400 像素; 专题头部图尺寸是 750*400 像素。 </p>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-theme_1.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-theme_2.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-theme_3.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-theme_4.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-theme_5.png' /></div>
			</div>
			<div id='woolly-banner' className='operate-section'>
				<h3>【海报编辑】</h3>
				<p className='mark'>创建海报前,需要先上传海报轮播图(上传步骤同栏目图), 尺寸是 750*400 像素。 </p>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-banner_1.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-banner_2.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-banner_3.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-banner_4.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-banner_5.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-banner_6.png' /></div>
			</div>
			<div id='woolly-product' className='operate-section'>
				<h3>【商品编辑】</h3>
				<p className='mark'>添加商品前,需要先上传商品主图和商品详情图(上传步骤同栏目图)。商品主图尺寸可参考 430*430像素, 商品主图建议是png格式。商品详情图建议不超过15张,宽度建议在750像素。</p>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-product_1.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-product_2.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-product_3.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-product_4.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-product_5.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-product_6.png' /></div>
			</div>
			<div id='woolly-order' className='operate-section'>
				<h3>【订单管理】</h3>
				<p className='mark'>管理后台提供了订单下载功能,可以在选择好订单创建时间等筛选条件后, 点击"下载"</p>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-order_1.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-order_2.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-order_3.png' /></div>
			</div>
			<div id='woolly-coupon' className='operate-section'>
				<h3>【优惠功能】</h3>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-coupon_1.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-coupon_2.png' /></div>
			</div>
			<div id='woolly-user' className='operate-section'>
				<h3>【用户管理】</h3>
				<p className='mark'>管理员可在后台下载、查看、编辑、删除用户, 也可以给当前用户发放优惠券</p>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-user_1.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-user_2.png' /></div>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-user_3.png' /></div>
			</div>
			<div id='woolly-account' className='operate-section'>
				<h3>【账单查询】</h3>
				<p className='mark'>管理员可在后台查看支付账单,包括支付、退款的流水。此功能供参考,实际请以微信商户支付流水为准。</p>
				<div className='image-wrapper'><Image src='./images/woolly/woolly-account_1.png' /></div>
			</div>
		</div>
	);
}

export default Woolly;
